<template>
	<view class="user comm-page-bg-1" :style="[pageStyle]" :class="themeName">
		<!-- start 这里是自定义吸顶 navbar, 在页面中已经配置了  "navigationStyle": "custom" -->
		<!-- 这段代码，之前是在 userInfo组件里，个人认为藏的有点深，他应该是在页面的最外层，而不是组件里面。 -->
		<!--- #ifndef  H5 -->
		<custom-navbar :title="styles.title" :percent="percent"></custom-navbar>
		<!--- #endif -->
		<!-- end 自定义吸顶 navbar -->
		
		<view v-for="(item, index) in pagesData" :key="index">
			<template v-if="item.name=='userinfo'">
				<w-userinfo v-show="item.show" :content="item.content" :styles="item.styles" :percent="percent" :title="styles.title" />
			</template>
			<template v-if="item.name=='userordernew'">
				<w-userorder v-show="item.show" :content="item.content" :styles="item.styles" />
			</template>
			<template v-if="item.name=='usertools'">
				<w-userserve v-show="item.show" :content="item.content" :styles="item.styles" />
			</template>
			<!-- <template v-if="item.name=='goodsrecom'">
				<w-goodsrecom v-show="item.show" :content="item.content" :styles="item.styles" />
			</template> -->
		</view>
	
		<tabbar v-show="true" />
		<!-- <view style="padding: 30rpx;" @click="gotoRedPage" v-if="isDevMobile">
			红包视频
		</view> -->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {apiGetPage} from '@/api/store'
	export default {
		data() {
			return {
				styles: {},
				pagesData: [],
				percent: 0,
				showTabbar: true,
				isDevelopment: false,
			}
		},
		methods: {
			...mapActions(['getUser']),
			ppols(){
				uni.navigateTo({
					url:'/pagesUser/pages/personalCenter'
				})
			},
			getPage() {
				apiGetPage({
					type: 3
				}).then(res => {
					const {
						common: {
							title
						},
						common,
						content
					} = res
					uni.setNavigationBarTitle({
						title
					});
					this.styles = common
					this.pagesData = content
				})
			},
			gotoRedPage() {
				uni.reLaunch({
					url: '/pages/short_play_new/detail'
				})
			},
			processEnvNodeEnv() {
				let NODE_ENV = ''
				try{
					NODE_ENV = process.env.NODE_ENV
				}catch(e){
					NODE_ENV= ''
					//TODO handle the exception
				}
				
				this.isDevelopment = NODE_ENV === "development" 
				
			}
		},
		computed: {
			pageStyle() {
				const {
					background_color,
					background_image,
					background_type,
				} = this.styles
				if (background_type == 0 || !background_image || !background_color) {
					return
				} 
				const style = background_type == 1 ? {
					'background-color': background_color
				}: {
					'background-image': `url(${background_image})`
				}
				return style
			},
			userInfoMobile() {
				if (this.userInfo) {
					return this.userInfo.mobile
				}
				return ''
			},
			isDevMobile() {
				if (this.isDevelopment) {
					return String(this.userInfoMobile).includes('1234567')
				}
				return false
			}
		},
		onLoad() {
			this.getPage()
			this.processEnvNodeEnv()
		},
		onShow() {
			this.getUser()
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
		},
		onPullDownRefresh() {
			this.getPage()
			this.getUser().finally(() => {
				uni.stopPullDownRefresh();
			})
		},
	}
</script>

<!-- @todo 这里有个问题，原生 样式， 微信小程序里 下方css代码渐变色不生效，有点费解 -->
<style lang="scss">
	
	.user {
		background-image: linear-gradient(to bottom, #ff8200 0%, #F7F7F7 50%);
        // background-image: linear-gradient(to bottom, #ff8200 , #dc9f2e,#babb5c,#97d88a);
	}

</style>
